<template>
  <div>


    <basic-container>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formReport" >
        <div style="margin-top: 22px">
          <el-form-item>
            <el-select v-model="formReport.classifyId" filterable @change="selectClassify" clearable placeholder="分类名称">
              <el-option
                v-for="item in classifylist"
                :key="item.classifyId"
                :label="item.classifyName"
                :value="item.classifyId"/>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-input v-model="formReport.userEmail" clearable placeholder="邮箱"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formReport.orderNum" clearable placeholder="业务订单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formReport.payOrder" clearable placeholder="商户单号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="payTime"
              clearable
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="订单开始日期"
              end-placeholder="订单结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary"  @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport">导出Excel</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-row>
        <el-col :span="24">
          <template>
            <el-table
              :data="tableData"
              :summary-method="getSummaries"
              show-summary
              stripe
              style="width: 100%">
              <el-table-column
                prop="orderNum"
                label="业务订单号">
              </el-table-column>
              <el-table-column
                prop="payOrder"
                label="商户单号">
              </el-table-column>
              <el-table-column
                prop="userEmail"
                label="用户邮箱">
              </el-table-column>
              <el-table-column
                prop="classifyName"
                label="商品分类" width="130">
              </el-table-column>
              <el-table-column
                prop="productName"
                label="商品名称">
              </el-table-column>
              <el-table-column
                prop="payAmount"
                label="订单金额">
                <template slot-scope="scope">
                <span v-if="scope.row.payAmount!=''"><span
                  class="skucost-pruice">{{ (Number(scope.row.payAmount)/100).toFixed(2) }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="discount"
                label="折扣金额">
                <template slot-scope="scope">
                <span v-if="scope.row.discount!=''"><span
                  class="skucost-pruice">{{ (Number(scope.row.discount)/100).toFixed(2) }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="payCount"
                label="购买数量">
              </el-table-column>

              <el-table-column
                prop="payTime"
                label="付款时间">
                <template slot-scope="scope">
                <span v-if="scope.row.payTime!=''"><span
                  class="skucost-pruice">{{ scope.row.payTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="payWay"
                label="充值方式">
                <template slot-scope="scope">
                  <span v-if="scope.row.payWay=='WX_H5'"><span class="skucost-pruice">微信支付</span></span>
                  <span v-if="scope.row.payWay=='ALI_PC'"><span class="skucost-pruice">支付宝支付</span></span>
                  <span v-if="scope.row.payWay=='WX_NATIVE'"><span class="skucost-pruice">微信支付</span></span>
                </template>
              </el-table-column>

              <el-table-column
                prop="isDeliovery"
                label="商品是否出库">
                <template slot-scope="scope">
                  <span v-show="scope.row.isDeliovery > 0" style="color: #ff4d51">
                    是
                  </span>
                  <span v-show="scope.row.isDeliovery <= 0">
                    否
                  </span>
                </template>
              </el-table-column>

              <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click.native="viewDelioveryDeatils(scope.row)">查看出库商品</el-button>
                </template>
              </el-table-column>

            </el-table>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </el-col>
      </el-row>

      <el-dialog :title="mode" :visible.sync="dialogProductVisible" @close="closeDialog()" :close-on-click-modal="false" customClass="customWidthCompany">
        <vue-element-loading :active="isSubActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
        <div v-if="dialogProductVisible" style="text-align: center">
          <el-row>
            <el-col :span="24">
              <template>
                <el-table
                  :data="tableSubData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="id"
                    label="编号" width="80">
                  </el-table-column>
                  <el-table-column
                    prop="productName"
                    label="归属商品" width="120">
                  </el-table-column>
                  <el-table-column
                    prop="accountDetails"
                    label="账号信息">
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="商品入库时间" width="200">
                    <template slot-scope="scope">
                      <span v-if="scope.row.createTime!=''"><span
                        class="skucost-pruice">{{ scope.row.createTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import axios from "axios";
import VueElementLoading from 'vue-element-loading'
import {cloneObj, parseParam} from "@/util/util";
import {getToken} from "@/util/auth";
import {applePayProductClassifyAllListM, applePayProductSpendM, applePayProductSpendTotalM,applePayProductAccountsM} from "@/api/apple/apple";
import website from "@/config/website";
export default {
  name: "headman",

  data() {
    return {
      isSubActive:false,
      isActive: false,
      dialogProductVisible: false,
      classifylist:[],
      formReport: {
        classifyId:'',
        productClassify:'',
        userEmail:'',
        orderNum:'',
        payOrder:''
      },
      formAccountReport: {
        orderNum:''
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      totalCount:'',
      discountCount:'',
      tableSubData:[],
      tableData:[],
      tableTotal:{},
      payTime:[],
      pickerOptions: website.pickerOptions,
      formGrant: {
        gameProjectid:'',
        surplusBalance:'',
        balance: '',
        memo: ''
      }
    };

  },
  components: {
    VueElementLoading
  },
  created() {
    this.loadClassifylist()
    this.onSubmit()
  },
  methods: {
    viewDelioveryDeatils(obj){
      this.isSubActive = true
      this.dialogProductVisible = true
      this.formAccountReport.orderNum = obj.orderNum
      applePayProductAccountsM(this.formAccountReport).then(res => {
        this.isSubActive = false
        this.tableSubData = res.data.data;
      })
    },
    closeDialog() {
      this.dialogProductVisible = false
      this.formAccountReport.orderNum = '';
    },
    selectClassify(value){
      this.formReport.classifyId=value
      this.formReport.productClassify=value
    },
    loadClassifylist() {
      applePayProductClassifyAllListM(this.formReport).then(res => {
        this.classifylist = res.data.data;
      })
    },
    getSummaries() {
      let sums = [];
      sums[0] = '总计(小写)'
      sums[5] = Number(this.totalCount/100).toFixed(2)
      sums[6] = Number(this.discountCount/100).toFixed(2)
      for(let i=0; i<=11; i++) {
        if(sums[i] == undefined) {
          sums[i] = ''
        }
      }
      sums = sums.map(item =>{
        if((typeof item) == "number"){
          return item
        }else{
          return item
        }
      });
      return sums;
    },

    onSubmit() {
      this.page.currentPage = 1;
      var startTime = undefined;
      var endTime = undefined;
      this.onLoad(startTime, endTime);
    },

    handleExport() {
      this.$confirm("是否导出订单数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formReport)
        if (this.isNotEmpty(this.payTime)) {
          forming.startTime = this.payTime[0].getTime()
          forming.endTime = this.payTime[1].getTime()
        }
        window.location.href = `/api/blade-app/applePay/export-applePaymentGrant?blade-auth=${getToken()}&${parseParam(forming)}`;
        this.formReport.startTime =''
        this.formReport.endTime =''
      });
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    onLoad(startTime, endTime){
      if (this.isNotEmpty(this.payTime)) {
        startTime = this.payTime[0].getTime()
        endTime = this.payTime[1].getTime()
      }
      this.isActive = true;

      applePayProductSpendM(this.page.currentPage, this.page.pageSize, Object.assign(this.formReport), startTime, endTime).then(res => {
        this.isActive = false;
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
      })
      applePayProductSpendTotalM(Object.assign(this.formReport), startTime, endTime).then(res => {
        const data = res.data.data;
        this.totalCount = data.payAmountT;
        this.discountCount = data.payDiscountT;
      });
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      var startTime = undefined;
      var endTime = undefined;
      this.onLoad(startTime, endTime);
    },
    handleCurrentChange(val) {

      this.page.currentPage = val;
      var startTime = undefined;
      var endTime = undefined;
      this.onLoad(startTime, endTime);
    },
  }
};
</script>

<style lang="scss" >

</style>
